<template>
  <div class="auction-container">
    <!-- 页面标题 -->
    <div class="page-header">
      <h2>拍卖专区</h2>
      <p class="subtitle">发现珍贵藏书，竞拍心仪图书</p>
    </div>

    <!-- 正在进行的拍卖 -->
    <div class="auction-section">
      <div class="section-header">
        <h3>
          <el-icon><Timer /></el-icon>
          正在进行
        </h3>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in ongoingAuctions" :key="item.id">
          <el-card class="auction-card" @click="handleAuctionClick(item)">
            <img :src="getImageUrl(item.product.pic)" class="auction-image" />
            <div class="auction-info">
              <h4>{{ item.product.name }}</h4>
              <div class="price-info">
                <span class="current-price">当前价: ¥{{ item.currentPrice }}</span>
                <span class="original-price">原价: ¥{{ item.product.price }}</span>
              </div>
              <div class="time-info">
                <span>剩余时间：</span>
                <el-countdown v-if="item.endTime" :value="item.endTime" format="DD 天 HH:mm:ss" />
              </div>
              <el-button type="primary" size="small" class="bid-button" @click.stop="handleBid(item)">
                立即竞拍
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 即将开始的拍卖 -->
    <div class="auction-section">
      <div class="section-header">
        <h3>
          <el-icon><AlarmClock /></el-icon>
          即将开始
        </h3>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in upcomingAuctions" :key="item.id">
          <el-card class="auction-card">
            <img :src="getImageUrl(item.product.pic)" class="auction-image" />
            <div class="auction-info">
              <h4>{{ item.product.name }}</h4>
              <div class="price-info">
                <span class="start-price">起拍价: ¥{{ item.startPrice }}</span>
                <span class="original-price">原价: ¥{{ item.product.price }}</span>
              </div>
              <div class="time-info">
                <span>开始时间：</span>
                <el-countdown v-if="item.startTime" :value="item.startTime" format="DD 天 HH:mm:ss" @finish="handleCountdownFinish" />
              </div>
              <el-button type="info" size="small" class="remind-button" @click="handleRemind(item)">
                开拍提醒
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>

    <!-- 已结束的拍卖 -->
    <div class="auction-section">
      <div class="section-header">
        <h3>
          <el-icon><Timer /></el-icon>
          已结束
        </h3>
      </div>
      <el-row :gutter="20">
        <el-col :span="6" v-for="item in endedAuctions" :key="item.id">
          <el-card class="auction-card" @click="handleAuctionClick(item)">
            <img :src="getImageUrl(item.product.pic)" class="auction-image" />
            <div class="auction-info">
              <h4>{{ item.product.name }}</h4>
              <div class="price-info">
                <span class="current-price">成交价: ¥{{ item.currentPrice }}</span>
                <span class="original-price">原价: ¥{{ item.product.price }}</span>
              </div>
              <div class="time-info">
                <span>结束时间：{{ formatDisplayTime(item.endTime) }}</span>
              </div>
              <el-button type="info" size="small" class="bid-button" @click.stop>
                已结束
              </el-button>
            </div>
          </el-card>
        </el-col>
      </el-row>
    </div>
  </div>
</template>

<script setup>
import { ref, onMounted } from 'vue'
import { Timer, AlarmClock } from '@element-plus/icons-vue'
import { useRouter } from 'vue-router'
import { ElMessage } from 'element-plus'
import { getOngoingAuctions, getUpcomingAuctions, setAuctionReminder, getEndedAuctions } from '@/api/auction'

const router = useRouter()
const ongoingAuctions = ref([])
const upcomingAuctions = ref([])
const endedAuctions = ref([])

// 转换时间为时间戳
const convertToTimestamp = (timeStr) => {
  if (!timeStr) return 0
  const date = new Date(timeStr)
  return date.getTime()
}

// 格式化显示时间
const formatDisplayTime = (timeStr) => {
  if (!timeStr) return ''
  const date = new Date(timeStr)
  return date.toLocaleString()
}

// 获取图片URL
const getImageUrl = (pic) => {
  if (!pic) {
    return new URL('@/assets/images/default-book.jpg', import.meta.url).href
  }
  if (pic.startsWith('http')) {
    return pic
  }
  return import.meta.env.VITE_APP_BASE_API + pic
}

// 处理拍卖品点击
const handleAuctionClick = (item) => {
  router.push(`/auction/detail/${item.id}`)
}

// 获取拍卖数据
const getAuctionData = async () => {
  try {
    // 获取正在进行的拍卖
    const ongoingResponse = await getOngoingAuctions()
    if (ongoingResponse.code === 200) {
      ongoingAuctions.value = ongoingResponse.rows.map(auction => ({
        ...auction,
        endTime: convertToTimestamp(auction.endTime),
        startTime: convertToTimestamp(auction.startTime)
      }))
    }

    // 获取即将开始的拍卖
    const upcomingResponse = await getUpcomingAuctions()
    if (upcomingResponse.code === 200) {
      upcomingAuctions.value = upcomingResponse.rows.map(auction => ({
        ...auction,
        endTime: convertToTimestamp(auction.endTime),
        startTime: convertToTimestamp(auction.startTime)
      }))
    }

    // 获取已结束的拍卖
    const endedResponse = await getEndedAuctions()
    if (endedResponse.code === 200) {
      endedAuctions.value = endedResponse.rows.map(auction => ({
        ...auction,
        endTime: convertToTimestamp(auction.endTime),
        startTime: convertToTimestamp(auction.startTime)
      }))
    }
  } catch (error) {
    console.error('获取拍卖数据失败:', error)
    ElMessage.error('获取拍卖数据失败')
  }
}

// 处理开拍提醒
const handleRemind = async (item) => {
  try {
    const response = await setAuctionReminder(item.id)
    if (response.code === 200) {
      ElMessage.success('已设置开拍提醒')
    }
  } catch (error) {
    console.error('设置开拍提醒失败:', error)
    ElMessage.error('设置开拍提醒失败')
  }
}

// 处理竞拍
const handleBid = (item) => {
  try {
    router.push(`/auction/detail/${item.id}`)
  } catch (error) {
    console.error('跳转到竞拍详情页失败:', error)
    ElMessage.error('跳转失败，请重试')
  }
}

// 处理倒计时结束
const handleCountdownFinish = () => {
  ElMessage.info('拍卖即将开始')
  getAuctionData() // 刷新页面数据
}

onMounted(() => {
  getAuctionData()
})
</script>

<style lang="scss" scoped>
.auction-container {
  padding: 40px;
  background: linear-gradient(135deg, #f6f8fb 0%, #f1f4f9 100%);
  min-height: 100vh;

  .page-header {
    text-align: center;
    margin-bottom: 48px;
    position: relative;
    
    &::after {
      content: '';
      position: absolute;
      bottom: -20px;
      left: 50%;
      transform: translateX(-50%);
      width: 60px;
      height: 3px;
      background: linear-gradient(45deg, #8B4513, #D2691E);
      border-radius: 3px;
    }

    h2 {
      font-size: 36px;
      font-weight: 700;
      background: linear-gradient(45deg, #8B4513, #D2691E);
      -webkit-background-clip: text;
      -webkit-text-fill-color: transparent;
      margin-bottom: 16px;
      letter-spacing: 1px;
    }

    .subtitle {
      color: #7f8c8d;
      font-size: 18px;
      font-weight: 500;
    }
  }

  .auction-section {
    margin-bottom: 48px;
    background: #fff;
    border-radius: 24px;
    padding: 32px;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.08);

    .section-header {
      margin-bottom: 28px;
      padding-bottom: 20px;
      border-bottom: 2px solid #ecf0f1;
      position: relative;
      
      h3 {
        font-size: 24px;
        color: #2c3e50;
        display: flex;
        align-items: center;
        gap: 12px;
        font-weight: 600;
        
        .el-icon {
          font-size: 24px;
          background: linear-gradient(45deg, #8B4513, #D2691E);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }
    }

    .el-row {
      margin: 0 -12px;
    }

    .el-col {
      padding: 0 12px;
    }
  }

  .auction-card {
    margin-bottom: 24px;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    cursor: pointer;
    border: none;
    border-radius: 16px;
    overflow: hidden;
    background: linear-gradient(145deg, #ffffff, #f8f9fa);
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.06);

    &:hover {
      transform: translateY(-8px);
      box-shadow: 0 12px 30px rgba(0, 0, 0, 0.12);
      
      .auction-image {
        transform: scale(1.05);
      }
    }

    .auction-image {
      width: 100%;
      height: 240px;
      object-fit: cover;
      transition: transform 0.5s cubic-bezier(0.4, 0, 0.2, 1);
      position: relative;
      
      &::after {
        content: '';
        position: absolute;
        bottom: 0;
        left: 0;
        right: 0;
        height: 100px;
        background: linear-gradient(to top, rgba(0,0,0,0.4), transparent);
        pointer-events: none;
      }
    }

    .auction-info {
      padding: 20px;

      h4 {
        margin: 0 0 16px;
        font-size: 18px;
        color: #2c3e50;
        font-weight: 600;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
      }

      .price-info {
        margin-bottom: 16px;
        display: flex;
        flex-direction: column;
        gap: 8px;

        .current-price, .start-price {
          background: linear-gradient(45deg, #8B4513, #D2691E);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
          font-size: 22px;
          font-weight: 700;
        }

        .original-price {
          color: #95a5a6;
          text-decoration: line-through;
          font-size: 15px;
        }
      }

      .time-info {
        margin-bottom: 20px;
        color: #7f8c8d;
        font-size: 15px;
        font-weight: 500;
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 12px;
        background: linear-gradient(145deg, #f8f9fa, #ffffff);
        border-radius: 12px;
        box-shadow: 0 2px 12px rgba(0, 0, 0, 0.04);
        
        .el-countdown {
          color: #8B4513;
          font-weight: 600;
          font-size: 16px;
          background: linear-gradient(45deg, #8B4513, #D2691E);
          -webkit-background-clip: text;
          -webkit-text-fill-color: transparent;
        }
      }

      .bid-button, .remind-button {
        width: 100%;
        height: 40px;
        font-size: 16px;
        font-weight: 600;
        border: none;
        border-radius: 12px;
        transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
        
        &:hover {
          transform: translateY(-2px);
        }
        
        &:active {
          transform: translateY(0);
        }
      }
      
      .bid-button {
        background: linear-gradient(45deg, #8B4513, #D2691E);
        color: #fff;
        
        &:hover {
          box-shadow: 0 8px 24px rgba(139, 69, 19, 0.25);
        }
      }
      
      .remind-button {
        background: linear-gradient(45deg, #95a5a6, #7f8c8d);
        color: #fff;
        
        &:hover {
          box-shadow: 0 8px 24px rgba(127, 140, 141, 0.25);
        }
      }
    }
  }
}

// 响应式布局优化
@media screen and (max-width: 768px) {
  .auction-container {
    padding: 20px;
    
    .page-header {
      h2 {
        font-size: 28px;
      }
      
      .subtitle {
        font-size: 16px;
      }
    }
    
    .auction-section {
      padding: 20px;
      
      .section-header h3 {
        font-size: 20px;
      }
    }
    
    .el-col {
      width: 100% !important;
    }
  }
}
</style> 